<template>
  <div>
    <el-container>
      <el-header><Header2></Header2></el-header>
      <el-main>
        <div id="title">个人信息</div>
        <el-form ref="form" 
          :model="form"
          :rules="rules"
           @load="infoLoad">
          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item prop="username">
                <el-input v-model="form.username" prefix-icon="el-icon-user" placeholder="昵称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
            
          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item prop="tel">
                <el-input v-model="form.tel" prefix-icon="el-icon-phone-outline" placeholder="电话"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="4">
              <el-form-item prop="email">
                <el-input v-model="form.email" prefix-icon="el-icon-message" placeholder="邮箱"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="2">
              <el-form-item>
                <el-button round @click="$router.back()">&nbsp;&nbsp;&nbsp;返回&nbsp;&nbsp;&nbsp;</el-button>
              </el-form-item>
            </el-col>

            <el-col :span="2">
              <el-form-item>
                <el-button round @click="submitForm('form')">确认修改</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer height="120px"><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>


import Header2 from "@/components/Header2";
import Footer from "@/components/Footer";

export default {
  name: "Profile",
  components: {Footer, Header2},
  data() {
    let checkEmail = (rule, value, callback) => {
      if (value === '') {
          callback(new Error('请输入邮箱'))
      } else if (!this.checkRemail(value)) {
          callback(new Error('邮箱地址不合法，请重新输入'))
      } else {
          callback()
      }
    }
    let checkTel = (rule, value, callback) => {
      if (value === '') {
          callback(new Error('请输入手机号码'))
      } else if (!this.checkMobile(value)) {
          callback(new Error('手机号码不合法，请重新输入'))
      } else {
          callback()
      }
    };
    return {
      form: {
        username: '',
        tel: '',
        email: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur'}],
        email: [{ validator: checkEmail, message: '', trigger: 'change' }],
        tel: [{ validator: checkTel, message:'', trigger: 'change' }]
      },
      InfoDate:[],
    }
  },
  methods:{
    //<!--显示信息-->
    infoLoad() {
      let uid = this.localStorage.getItem("Uid")
      this.$axios.get("user/Info",{
        params:{
          uid:uid
        }
      }).then(res => {
        this.form.username =res.data.userName;
        this.form.tel = res.data.tel;
        this.form.email = res.data.email;
        console.log(res);
        console.log("资源加载完毕");
      }).catch(res => {
        alert(res.data.msg)
      })
    },
    // <!--提交修改-->
    submitForm(formName) {
      let fd = new FormData();
      fd.append("userName",this.form.username);
      fd.append("email",this.form.email);
      fd.append("telphone",this.form.tel);
      // fd.append("passwd",this.form.password);
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      console.log(this.formName)
      this.$refs[formName].validate(valid => {
        if(valid){
          
          this.$axios.post("user/updateuser", fd, config).then(res => {
            alert(res.data.msg)
            if(res.data.msg === "信息修改成功")
            {
              this.$router.push({path:'/'})
              console.log(res.data)
            }
          }).catch(res => {
            // alert(res?.data?.msg)
            alert(res.data.msg)
          })
        }else{
          alert("信息修改失败，请检查输入信息")
        }
      })
    },
    // 验证手机号
    checkMobile(str) {
      let re = /^1\d{10}$/
      if (re.test(str)) {
        return true;
      } else {
        return false;
      }
    },
    // 验证邮箱
    checkRemail(str) {
      let re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if (re.test(str)) {
        return true;
      } else {
        return false;
      }
    }

  }
}
</script>

<style scoped>
.el-button {
  background: #3A62D7;
  border: #3A62D7;
  color: #F5F5F5;
}
.el-row {
  margin-top: 30px;
  margin-bottom: 20px;
}

#title {
  color: #F5F5F5;
  font-size: 30px;
  font-weight: bold;
  border: #333333;
  margin-top: 50px;
  margin-bottom: 20px;
}

#bg {

  background: url("../assets/bg.png") center center no-repeat;
  background-size: contain;
  position: absolute
}

.s2{    /*s2是我的输入框class*/
}
/deep/ .el-input__inner { /*或者 .s2>>>.el-input__inner  */
  border-radius: 20px; /*输入框圆角值*/
  background-color: rgba(255, 255, 255, 0.35);
  border: rgba(255, 255, 255, 0.35);
  color: #F5F5F5;

}
/deep/ .el-input__prefix {
  color: #F5F5F5;
}

.el-header{
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-footer {
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 3px;

}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 150px;
}

.el-main {
  background: url("../assets/bg.png") center center no-repeat;
  background-size: 100% 100%;
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  height: 800px;
  padding: unset;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>